<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>.::ATUS::. Atención al Usuario</title>
                <link rel="shortcut icon" href="favicon.ico"/>
            </f:facet>
        </h:head>
        <h:body>
            <div>
                <h:graphicImage url="/atus/images/Banner.jpg" width="100%" height="100%" alt="LogoAtus"  style="vertical-align: top;"/> 
            </div>

            <p:panel>
                <p:panelGrid> 
                    <p:row>
                        <p:column style="vertical-align: top;">
                            <h:form>
                                <p:menu>
                                    <p:submenu label="Menú">                                
                                        <p:menuitem value="Inicio" url="/faces/atus/indexPuntoAtencion.xhtml" />
                                        <p:menuitem value="Turnos" url="/faces/atus/gestionTurnosPunto.xhtml" />
                                        <p:menuitem value="Consultas" url="/faces/atus/consultasTurnosPunto.xhtml" />
                                        <p:menuitem value="Reportes" url="/faces/atus/gestionReportesPunto.xhtml" />
                                        <p:menuitem value="Funcionario" url="/faces/atus/gestionFuncionarioPunto.xhtml" />
                                        <p:menuitem value="Cambio Contraseña" url="/faces/atus/CambiaPasswordPunto.xhtml" />
                                        <p:menuitem value="Cerrar Sesión" actionListener="#{usuariosAtusVista.cerrarSesion_action}" />
                                    </p:submenu>                    
                                </p:menu>
                            </h:form>
                        </p:column>
                        <p:column> 

                            <h:form id="formulario"> 
                                <p:panel id="panelTurnos" header="Turnos"> 
                                    <p:messages id="mensajes" showDetail="true" closable="true" />
                                    <p:growl id="growl" showDetail="true" sticky="true" /> 
                                    <f:facet name="actions">
                                        <p:commandLink onclick="PF('helpDialog').show();" styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"><h:outputText styleClass="ui-icon ui-icon-help" /></p:commandLink>
                                    </f:facet>
                                    <p:focus context="panelTurnos"/>
                                    <p:panelGrid>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="Documento Usuario:"/> 
                                            </p:column>
                                            <p:column colspan="3">
                                                <p:inputText id="txtDocumento" binding="#{turnosVista.txtIdentificacion}" size="30">
                                                    <p:ajax listener="#{turnosVista.txtIdentificacion_listener}" update="panelTurnos" />
                                                </p:inputText>
                                            </p:column>
                                        </p:row> 
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="Nombre:"/> 
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="txtNombre" binding="#{turnosVista.txtNombre}" size="30"/> 
                                            </p:column> 
                                            <p:column>
                                                <h:outputText value="Apellido:"/> 
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="txtApellido" binding="#{turnosVista.txtApellido}" size="30"/> 
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="Correo:"/> 
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="txtCorreo" binding="#{turnosVista.txtCorreo}" size="30"/> 
                                            </p:column> 
                                            <p:column>
                                                <h:outputText value="Teléfono:"/> 
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="txtTelefono" binding="#{turnosVista.txtTelefono}" size="30"/> 
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="Dependencia:"/> 
                                            </p:column>
                                            <p:column colspan="3">
                                                <p:selectOneMenu id="cmbDependencia" binding="#{turnosVista.cmbDependencia}" > 
                                                    <f:selectItem itemLabel="Seleccione" itemValue="" noSelectionOption="true"/>
                                                    <f:selectItems value="#{turnosVista.itemsDependencia}" /> 
                                                    <p:ajax listener="#{turnosVista.onDependenciaChange}" update="cmbArea" />
                                                </p:selectOneMenu>
                                            </p:column>                                         
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="Area:"/> 
                                            </p:column>
                                            <p:column colspan="3">
                                                <p:selectOneMenu id="cmbArea" binding="#{turnosVista.cmbArea}" >
                                                    <f:selectItem itemLabel="Seleccione" itemValue="" noSelectionOption="true"/>
                                                    <f:selectItems value="#{turnosVista.itemsArea}" /> 
                                                </p:selectOneMenu> 
                                            </p:column>                                         
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="Motivo:"/> 
                                            </p:column>
                                            <p:column colspan="3">
                                                <p:inputTextarea id="txtMotivo" binding="#{turnosVista.txtMotivo}" rows="3" cols="45" autoResize="false"></p:inputTextarea>
                                            </p:column>                                         
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="Hora Ingreso:"/> 
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="txtHoraIngreso" binding="#{turnosVista.txtHoraIngreso}" value="#{turnosVista.horaSistema}" disabled="true"  size="30"/>
                                            </p:column> 
                                            <p:column>
                                                <h:outputText value="Hora Salida:"/> 
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="txtHoraSalida" binding="#{turnosVista.txtHoraSalida}" disabled="true" size="30"/>
                                            </p:column> 
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="Observaciones:"/> 
                                            </p:column>
                                            <p:column colspan="3">
                                                <p:inputTextarea id="txtObservaciones" binding="#{turnosVista.txtObservaciones}" rows="3" cols="45" autoResize="false"></p:inputTextarea>
                                            </p:column>                                        
                                        </p:row>
                                        <p:row>
                                            <p:column>
                                                <h:outputText value="Estado:"/> 
                                            </p:column>
                                            <p:column colspan="3">                                            
                                                <p:inputText id="txtEstado" binding="#{turnosVista.txtEstado}" value="PENDIENTE" readonly="true" size="30" style="font-weight: bold;"/> 
                                            </p:column>                                           
                                        </p:row>

                                        <p:row>
                                            <p:column colspan="4">
                                                <div align="center"> 
                                                    <p:commandButton id="btnCrear" value="Crear" binding="#{turnosVista.btnRegistrar}" action="#{turnosVista.registrar_action}"  update="formulario" />
                                                    <p:commandButton id="btnLimpiar" value="Limpiar" binding="#{turnosVista.btnLimpiar}" action="#{turnosVista.limpiar_action}"  update="formulario" />
                                                </div>
                                            </p:column>  
                                        </p:row>

                                    </p:panelGrid>

                                </p:panel>                    

                                <h:outputText value="Si Desea Buscar un Turno, Digite el Dato en el Filtro Respectivo" />
                                <br />
                                <p:commandButton id="btnRefrescar" value="Refrescar" icon="ui-icon-refresh"  binding="#{turnosVista.btnRefrescar}" action="#{turnosVista.refrescar_action}"  update=":formulario:listaTurnos" />
                                <br />
                                <p:dataTable id="listaTurnos" var="turnos" value="#{turnosVista.listaTurnos}"
                                             paginator="true" rows="10" selection="#{turnosVista.selectedTurno}"
                                             selectionMode="single" rowKey="#{turnos.codigo}" filteredValue="#{turnosVista.listaTurnos}"
                                             emptyMessage="No Existen Turnos Hoy!" >

                                    <p:ajax event="rowSelect" listener="#{turnosVista.onRowSelect}"   
                                            update=":formulario:panelTurnos" /> 

                                    <f:facet name="header">  
                                        Turnos Fecha: #{turnosVista.fechaSistema}
                                    </f:facet> 

                                    <p:column sortBy="#{turnos.numero}" filterBy="#{turnos.numero}" filterMatchMode="contains">
                                        <f:facet name="header">
                                            <h:outputText  value="N° Turno" />                            
                                        </f:facet>
                                        <h:outputText  value="#{turnos.numero}" />                          
                                    </p:column>

                                    <p:column sortBy="#{turnos.documentoCliente.documento.documento}" filterBy="#{turnos.documentoCliente.documento.documento}" filterMatchMode="contains">
                                        <f:facet name="header">
                                            <h:outputText  value="Documento Cliente" />                            
                                        </f:facet>
                                        <h:outputText  value="#{turnos.documentoCliente.documento.documento}" />                          
                                    </p:column>
                                    <p:column sortBy="#{turnos.documentoCliente.documento.nombre}" filterBy="#{turnos.documentoCliente.documento.nombre}" filterMatchMode="contains">
                                        <f:facet name="header">
                                            <h:outputText  value="Cliente" />                            
                                        </f:facet>
                                        <h:outputText  value="#{turnos.documentoCliente.documento.nombre} #{turnos.documentoCliente.documento.apellido}" />                          
                                    </p:column>

                                    <p:column sortBy="#{turnos.area.nombre}">
                                        <f:facet name="header">
                                            <h:outputText  value="Area" />                            
                                        </f:facet>
                                        <h:outputText  value="#{turnos.area.nombre}" />                          
                                    </p:column> 

                                    <p:column sortBy="#{turnos.estado}">
                                        <f:facet name="header">
                                            <h:outputText  value="Estado" />                            
                                        </f:facet>
                                        <h:outputText  value="#{turnos.estado}" />                          
                                    </p:column>
                                </p:dataTable>   

                                <!-- dialogo de ayuda -->
                                <p:dialog id="modalDialog" header="Ayuda" widgetVar="helpDialog" showEffect="fade" hideEffect="explode" modal="true" dynamic="true">  
                                    <p align="justify">                       
                                        En esta página usted podrá:<br/><br/>
                                        <b>-Crear Turnos:</b>
                                        Esta opción sólo es válida para el funcionario del Punto de Atención al Usuario. Aquí podrá registrar un nuevo turno en el dia en curso. Para ello ingrese el documento de identidad del cliente y presione
                                        la tecla TAB o Enter. El sistema consultará si se encuentra en el sistema y cargará sus datos personales automáticamente. Si no está, se deberá registrar sus datos personales. Luego seleccione la dependencia y
                                        area funcional que atenderá el turno, registrando también el motivo. La hora de ingreso será capturada automáticamente por el sistema. Las observaciones son opciones. El turno será creado con estado Pendiente. 
                                        Para finalizar de clic en el botón Crear.
                                        <br/><br/>
                                        <b>-Consultar Turnos del Día:</b>
                                        En la tabla inferior de resultados usted podrá ver los turnos del día en curso que han sido registrados, además podrá filtrar los resultados por número de turno, y documento o nombre del cliente. Dado que mientras 
                                        usted tiene esta página activa algunos turnos pueden estar cambiando su estado desde las demás dependencias use el botón Refrescar para asi actualizar la tabla de turnos. Si desea ver el detalle de un turno ya registrado
                                        seleccionelo de la tabla y este se cargará en el formulario.
                                        <br/>                     
                                    </p>
                                </p:dialog>
                            </h:form>
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </p:panel> 
            <div>
                <h:graphicImage url="/atus/images/Pie.jpg" width="100%" height="100%" alt="LogoAtus"  style="vertical-align: bottom;"/>
            </div>
        </h:body>

    </f:view>
</html>
